/**
 * Created by Administrator on 2018/3/28.
 */
window.onload = function () {
    //旋转木马轮播图
    var config = [
        {
            "width": 400,
            "top": 120,
            "left": -200,
            "opacity": 0.2,
            "zIndex": 2
        },//0
        {
            "width": 600,
            "top": 70,
            // "left": 0,
            "left": -100,
            "opacity": 0.8,
            "zIndex": 3
        },//1
        {
            "width": 800,
            // "top": 120,
            "top": 40,
            "left": 200,
            "opacity": 1,
            "zIndex": 4
        },//2
        {
            "width": 600,
            "top": 70,
            // "left": 600,
            "left": 700,
            "opacity": 0.8,
            "zIndex": 3
        },//3
        {
            "width": 400,
            "top": 120,
            "left": 1000,
            "opacity": 0.2,
            "zIndex": 2
        }
    ];

    // 1.获得要操作的对象
    var wrap = document.querySelector(".head_swiper #wrap");
    var slide = document.querySelector(".head_swiper #slide");
    var arrLeft = document.querySelector(".head_swiper #arrLeft");
    var arrRight = document.querySelector(".head_swiper #arrRight");
    var ul = slide.children[0];
    var lis = ul.children;
    var arrow = document.querySelector(".head_swiper #arrow");
    var timer_muma = null;

    // 2.重新分配每一个li标签的位置
    assign();
    // for(var i=0;i<config.length;i++){
    //   animate(lis[i],config[i]);
    // }
    // 3.当鼠标移入大盒子的时候，要显示左右按钮
    wrap.onmouseover = function () {
        animate1(arrow, {
            opacity: 1
        });
        clearInterval(timer_muma);
    };

    // 4. 鼠标 离开的时候，要隐藏左右按钮
    wrap.onmouseout = function () {
        animate1(arrow, {
            opacity: 0
        });
        timer_muma = setInterval(function () {
            config.push(config.shift());
            assign();
        }, 3000);
    };
    // 5.给右侧按钮注册事件
    arrRight.onclick = function () {
        config.push(config.shift()); // 数组已经重新排列 了
        assign(); // 根据数组的新排列结构，重新渲染页面的标签
    };

    // 6.开启定时器
    clearInterval(timer_muma);
    timer_muma = setInterval(function () {
        config.push(config.shift());
        assign();
    }, 3000);

    arrLeft.onclick = function () {
        // 要把数据中最后一个剪切下来,添加在数组的最前面
        config.unshift(config.pop());
        assign()
    };

    function assign() {
        for (var i = 0; i < config.length; i++) {
            animate1(lis[i], config[i]);
        }
    }


    //网易新闻轮播图
    // 1. 获取需要的标签
    var new_slider = document.querySelector(".louceng_box .news #slider");
    var new_slider_main = document.querySelector(".louceng_box .news #slider_main");
    var slider_main_img = new_slider_main.children;
    var slider_ctl = new_slider.children[1];
    var iNow = 0;

    // 2. 动态创建指示器
    for (var i = 0; i < slider_main_img.length; i++) {
        var span_slider = document.createElement("span");
        span_slider.className = "slider-ctl-icon";
        span_slider.innerText = slider_main_img.length - i - 1;
        slider_ctl.insertBefore(span_slider, slider_ctl.children[1]);
    }

    // 3. 让第一个选中
    slider_ctl.children[1].className = "slider-ctl-icon current";

    // 4. 让滚动的内容归位
    var scroll_w = new_slider.offsetWidth;
    for (var j = 1; j < slider_main_img.length; j++) {
        slider_main_img[j].style.left = scroll_w + "px";
    }

    // 5. 遍历监听操作
    var slider_ctl_child = slider_ctl.children;
    for (var i = 0; i < slider_ctl_child.length; i++) {
        // 5.1 监听点击
        slider_ctl_child[i].onmousedown = function () {
            // 5.2 判断
            if (this.className === "slider-ctl-prev") { // 左边
                /*
                 1.当前可视区域的图片快速右移;
                 2.上一张图片快速出现在可视区域的左边
                 3.让这张图片做动画进入
                */
                buffer(slider_main_img[iNow], {"left": scroll_w});
                iNow--;
                // 判断
                if (iNow < 0) {
                    iNow = slider_main_img.length - 1;
                }
                slider_main_img[iNow].style.left = -scroll_w + 'px';
                buffer(slider_main_img[iNow], {"left": 0});

            } else if (this.className === "slider-ctl-next") { // 右边
                /*buffer(slider_main_img[iNow], {"left": -scroll_w});
                iNow++;
                //判断
                if(iNow >= slider_main_img.length){
                    iNow = 0;
                }
                slider_main_img[iNow].style.left = scroll_w + 'px';
                buffer(slider_main_img[iNow], {"left": 0});*/

                autoPlay(); // 调用自动往右轮播
            } else { // 下边
                /*
                 1.用当前点击的索引和选中索引对比
                 2.点击的 > 选中的, 相当于点击了右边的按钮
                 2.点击的 < 选中的, 相当于点击了左边的按钮
                */

                // 获取索引
                var index = parseInt(this.innerText); // 转为num类型
                // 对比
                if (index > iNow) {
                    buffer(slider_main_img[iNow], {"left": -scroll_w});
                    slider_main_img[index].style.left = scroll_w + 'px';
                } else if (index < iNow) {
                    buffer(slider_main_img[iNow], {"left": scroll_w});
                    slider_main_img[index].style.left = -scroll_w + 'px';
                }
                iNow = index;
                buffer(slider_main_img[iNow], {"left": 0});
            }
            changeIndex();
        }
    }

    // 6. 切换索引
    function changeIndex() {
        for (var i = 1; i < slider_ctl_child.length - 1; i++) {
            slider_ctl_child[i].className = "slider-ctl-icon";
        }
        //alert(typeof iNow); // 判断点击iNow的输出类型
        //console.log(slider_ctl_child[iNow + 1]);
        slider_ctl_child[iNow + 1].className = "slider-ctl-icon current";
    }

    // 7. 自动播放
    var timer_new = setInterval(autoPlay, 2000);

    function autoPlay() {
        /*
         1.当前可视区域的图片快速左移;
         2.下一张图片快速出现在可视区域的右边
         3.让这张图片做动画进入
         */
        buffer(slider_main_img[iNow], {"left": -scroll_w});
        iNow++;
        // 判断
        if (iNow >= slider_main_img.length) {
            iNow = 0;
        }
        slider_main_img[iNow].style.left = scroll_w + 'px';
        buffer(slider_main_img[iNow], {"left": 0});

        changeIndex();
    }

    // 8. 设置和清除定时器
    new_slider.onmouseover = function () {
        clearInterval(timer_new);
    };

    new_slider.onmouseout = function () {
        timer_new = setInterval(autoPlay, 2000);
    };


    //中部吸顶效果
    var tab_nav = document.querySelector(".header_box .header_tab #nav");
    var nav_top_height = tab_nav.offsetTop;

    // console.log(tab_nav);
    // 2. 监听窗口滚动
    // window.onscroll = function () {
      /*  var scroll_top_height = scroll().top;
        console.log(scroll_top_height);

        // 2.1 判断
        if(scroll_top_height >= nav_top_height){
            tab_nav.className = "nav";
            // neirong.style.paddingTop = nav.offsetHeight + "px";
            // console.log(neirong.style.paddingTop);
        }else {
            tab_nav.className = "";
            //neirong.style.paddingTop = "0px";
        }*/
    // }



    //楼层9瀑布流开始
// 1. 实现瀑布流布局
    waterFull("main_water", "box");

// 2. 滚动动态加载图片
    window.onscroll = function () {

        var scroll_top_height = scroll().top;
        console.log(scroll_top_height);

        // 2.1 判断
        if(scroll_top_height >= nav_top_height){
            tab_nav.className = "nav";
            // neirong.style.paddingTop = nav.offsetHeight + "px";
            // console.log(neirong.style.paddingTop);
        }else {
            tab_nav.className = "";
            //neirong.style.paddingTop = "0px";
        }


        // 判断是否具备加载图片的条件, 调用函数
        if(checkWillLoadImage()){
            // 2.1 造数据
            var dataArr = [
                {"src": "../images/water/01.jpg"},
                {"src": "../images/water/02.jpg"},
                {"src": "../images/water/03.jpg"},
                {"src": "../images/water/04.jpg"},
                {"src": "../images/water/05.jpg"},
                {"src": "../images/water/06.jpg"},
                {"src": "../images/water/07.jpg"},
                {"src": "../images/water/08.jpg"},
                {"src": "../images/water/09.jpg"},
                {"src": "../images/water/10.jpg"},
                {"src": "../images/water/11.jpg"},
                {"src": "../images/water/12.jpg"},
                {"src": "../images/water/13.jpg"},
                {"src": "../images/water/14.jpg"},
                {"src": "../images/water/15.jpg"},
                {"src": "../images/water/16.jpg"},
                {"src": "../images/water/17.jpg"},
                {"src": "../images/water/18.jpg"},
                {"src": "../images/water/19.jpg"},
                {"src": "../images/water/20.jpg"},
                {"src": "../images/water/21.jpg"},
                {"src": "../images/water/22.jpg"},
                {"src": "../images/water/23.jpg"},
                {"src": "../images/water/24.jpg"},
                {"src": "../images/water/25.jpg"},
                {"src": "../images/water/26.jpg"}
            ];

            // 2.2 创建元素, 拼接在后面的图片盒子
            for(var i=0; i<dataArr.length; i++){
                //创建div盒子, 命名为box
                var newBox = document.createElement("div");
                newBox.className = "box";
                // 添加入大盒子最为子元素
                $("main_water").appendChild(newBox);

                var newPic = document.createElement("div");
                newPic.className = "pic";
                newBox.appendChild(newPic);

                var newImg = document.createElement("img");
                // newImg.src = "www.baidu.com/images/img01.jpg"; // 来源网络的图片
                newImg.src = "images/" + dataArr[i].src;
                newPic.appendChild(newImg);
            }

            // 2.3 重新布局
            waterFull("main_water", "box");
        }
    };

    /**
     * 实现瀑布流布局
     */
    function waterFull(parent, child) {
        // 1. 父盒子居中
        // 1.1 获取所有的盒子
        var allBox = $(parent).getElementsByClassName(child);
        // 1.2 获取子盒子的宽度
        var boxWidth = allBox[0].offsetWidth;
        // 1.3 获取屏幕的宽度
        var screenW = document.documentElement.clientWidth;
        // 1.4 求出列数
        var cols = parseInt(screenW / boxWidth);
        // 1.5 父盒子居中
        $(parent).style.width = cols * boxWidth + 'px';
        $(parent).style.margin = "0 auto";


        // 2. 子盒子的定位
        // 2.1 定义高度数组
        var heightArr = [], boxHeight = 0, minBoxHeight = 0, minBoxIndex = 0;
        // 2.2 遍历子盒子
        for (var i = 0; i < allBox.length; i++) {
            // 2.2.1 求出每一个子盒子的高度
            boxHeight = allBox[i].offsetHeight;
            // 2.2.2 取出第一行盒子的高度放入高度数组
            if (i < cols) { // 第一行
                heightArr.push(boxHeight); // push把盒子的高度放到数组中
            } else { // 剩余行
                // 1. 取出最矮的盒子高度
                // minBoxHeight = Math.min.apply(this, heightArr); // 调用apply()方法
                // 或者引入Underscore-min.js库,可以使用下面的代码表达;
                minBoxHeight = _.min(heightArr);
                // 2. 求出最矮盒子对应的索引,调用函数,传入参数;
                minBoxIndex = getMinBoxIndex(heightArr, minBoxHeight);
                // 3. 子盒子定位
                allBox[i].style.position = "absolute";
                allBox[i].style.left = minBoxIndex * boxWidth + 'px';
                allBox[i].style.top = minBoxHeight + 'px';
                // 4. 更新数组中的高度
                heightArr[minBoxIndex] += boxHeight;
            }
        }
        // console.log(heightArr, minBoxHeight, minBoxIndex);
    }
    /**
     * 获取数组中最矮盒子高度的索引
     * @param arr
     * @param val
     * @returns {number}
     */
    function getMinBoxIndex(arr, val) {
        for(var i=0; i<arr.length; i++){
            if(arr[i] === val){
                return i;
            }
        }
    }

    function $(id) {
        return typeof id === "string" ? document.getElementById(id) : null;
    }

    /**
     * 判断是否具备加载图片的条件
     */
    function checkWillLoadImage() {
        // 1. 获取最后一个盒子
        var allBox = document.getElementsByClassName("box");
        var lastBox = allBox[allBox.length - 1];

        // 2. 求出最后一个盒子自身高度的一半 + offsetTop
        var lastBoxDis = lastBox.offsetHeight * 0.5 + lastBox.offsetTop;

        // 3. 求出屏幕的高度
        var screenW = document.body.clientHeight || document.documentElement.clientHeight;

        // 4. 求出页面偏离浏览器的高度, 引入myfunc.js 获取滚动的头部距离和左边距离
        var scrollTop = scroll().top;

        return lastBoxDis <= screenW + scrollTop;
    }
//楼层9瀑布流结束


};







